<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咖啡</title>
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/购买页.css">
</head>
<body>  
    <div id="left">
        <div>
            <img src="../images/首页_02.png" alt="">
            <div>首页</div>
            <div>购物车</div>
        </div>
        <div>
            <span>菜单</span>
            <p>全部</p>
            <p>咖啡</p>
            <p>美食烘焙</p>
            <p>美食蛋糕</p>
        </div>
    </div>
    <div id="right">
        <div>
            <h2 id="quanbu">咖啡饮品-咖啡融合冰淇凌</h2>
            <div>
                <div>
                    <img src="../images/99 (1).jpg" alt="">
                    <p>阿福奇朵</p>
                </div>
                <div>
                    <img src="../images/99 (8).jpg" alt="">
                    <p>麦芽雪冷翠</p>
                </div>
                <div>
                    <img src="../images/99 (9).jpg" alt="">
                    <p>冷翠浮乐朵</p>
                </div>
                <div>
                    <img src="../images/99 (13).jpg" alt="">
                    <p>气致-冷翠浮乐朵</p>
                </div>
            </div>
        </div>
        <div>
            <h2 id="kafei">冷翠咖啡系列</h2>
            <div>
                <div>
                    <img src="../images/99 (7).jpg" alt="">
                    <p>冷翠冰咖啡</p>
                </div>
                <div>
                    <img src="../images/99 (17).jpg" alt="">
                    <p>轻甜奶油冷翠</p>
                </div>
                <div>
                    <img src="../images/99 (10).jpg" alt="">
                    <p>棉云冷翠</p>
                </div>
                <div>
                </div>
            </div>
        </div>
        <div>
            <h2>手工调制浓缩咖啡</h2>
            <div>
                <div>
                    <img src="../images/99 (3).jpg" alt="">
                    <p>美式咖啡(冷/热)</p>
                </div>
                <div>
                    <img src="../images/99 (4).jpg" alt="">
                    <p>拿铁</p>
                </div>
                <div>
                    <img src="../images/99 (11).jpg" alt="">
                    <p>浓缩咖啡</p>
                </div>
                <div>
                    <img src="../images/99 (5).jpg" alt="">
                    <p>摩卡(冷/热)</p>
                </div>
            </div>
        </div>
        <div>
            <h2 id="hongbei">烘焙</h2>
            <div>
                <div>
                    <img src="../images/99 (2).jpg" alt="">
                    <p>美式松饼</p>
                </div>
                <div>
                    <img src="../images/99 (12).jpg" alt="">
                    <p>法式香酥可颂</p>
                </div>
                <div>
                    <img src="../images/99 (6).jpg" alt="">
                    <p>香浓巧克力麦芬</p>
                </div>
                <div>
                </div>
            </div>
        </div>
        <div id="dangao">
            <h2>蛋糕</h2>
            <div>
                <div>
                    <img src="../images/99 (14).jpg" alt="">
                    <p>法式马克龙</p>
                </div>
                <div>
                    <img src="../images/99 (15).jpg" alt="">
                    <p>咖啡提拉米苏</p>
                </div>
                <div>
                    <img src="../images/99 (16).jpg" alt="">
                    <p>浓醇三重黑巧克力蛋糕</p>
                </div>
                <div>
                </div>
            </div>
        </div>
        <p>实际产品以门店供应为准。</p>
    </div>
    <div id="mai">    
        <i class="iconfont">&#xe622;</i>
        <h3>1</h3>
    </div>
    <script>
        let divs=left.querySelectorAll("div");
        for(let i=1;i<divs.length-1;i++){
            divs[i].onclick=function(){
                if(this.innerText=="首页"){
                    open("../index.html","_self")
                }else{
                    open("../html/index 购物车.html","goumai","width=1000px height=800px top=50px left=88px");
                }
            }
        }
        let iconfont=document.querySelector(".iconfont");

        iconfont.onclick=function(){
            open("../html/index 购物车.html","goumai","width=1000px height=800px top=50px left=88px");
        }
        let ps=document.querySelectorAll("#left>div:nth-of-type(2)>p");
        ps.forEach(p=>{
            p.onclick=function(){
                if(this.innerHTML=="全部"){
                    right.scrollTo(0,0);
                }else if(this.innerHTML=="咖啡"){
                    right.scrollTo(0,272);
                }else if(this.innerHTML=="美食烘焙"){
                    right.scrollTo(0,817);
                }else if(this.innerHTML=="美食蛋糕"){
                    right.scrollTo(0,817);
                }
            }
        })
    </script>
</body>
</html>